<template>
	<view>
		<u-cell-group>
			<u-cell-item  title="上班时间" :value="formData.beginTime" :arrow="false">
				
			</u-cell-item>
			<u-cell-item  title="下班时间" :value="formData.endTime" :arrow="false">
				
			</u-cell-item>
			<u-cell-item  title="打卡时间" :value="formatTime(formData.checkTime)" :arrow="false">
				
			</u-cell-item>
			<u-cell-item  title="打卡状态" :value="formData.remark" :arrow="false">
				
			</u-cell-item>
			<!-- 定义地图组件设置他的css样式
			 默认的中心点经纬度
			 缩放级别
			 地图中的marker标记点和其他样式
			 -->
			 <view>
				 打卡位置信息:蓝色标记点为员工位置，红色标记点为公位置，圆圈为打卡范围
			 </view>
			<map style="width: 100%; height: 300px;" 
				:latitude="formData.lat" 
				:longitude="formData.lng" 
				scale="12"
				:circles="circles"
				:markers="covers">
			                
			</map>
		</u-cell-group>
	</view>
</template>

<script>
	import {getCheckInfo} from '@/api/user-api.js'
	export default{
		data(){
			return {
				formData:{},
				covers: [],//地图上的标记点数组
				circles:[]//地图上的圆圈
			}
		},
		async onLoad(options) {
			console.log(options)
			await this.getCheckInfoById(options.id)
		},
		methods:{
			async getCheckInfoById(id){
				let res = await getCheckInfo(id)
				console.log(res.data)
				if(res.data.code == 200){
					this.formData = res.data.data
					//根据公司为止和公司的打卡范围画出圆圈
					this.circles = [
						{
							latitude: this.formData.lat1,
							longitude:  this.formData.lng1,
							color:'#409EFF',
							fillColor:'rgba(217, 236, 255,0.5)',
							radius:this.formData.r*1000,
							strokeWidth:2
						}
					]
					//根据公司为止和员工为止绘制标记点
					this.covers = [ 
						{
								latitude: this.formData.lat1,
								longitude:  this.formData.lng1,
								iconPath: '/static/marker1.png',
								width:40,
								height:40
						},
						{
								latitude: this.formData.lat,
								longitude:  this.formData.lng,
								iconPath: '/static/marker.png',
								width:40,
								height:40
						},
					]
				}
			}
		},
		computed:{
		  formatTime(){
		    return function(time){
		      let d = new Date(Number(time))
		      return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
		    }
		  }
		},
	}
</script>

<style>
</style>
